<template>
	<view class="detail">
		<view class="bg-white mb-20">
			<view class="">
				<video class="video w-100" id="myVideo"
					src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
					@error="videoErrorCallback"></video>
			</view>
			<view class="p-20 border-bottom">
				<view class="title flex justify-between align-center mb-20">
					<view class="text">
						{{ lessonInfo.title}}
					</view>
					<view class="icon" @click="iconClick">
						<PsySvg v-if="isShow" src="/static/detail/up.svg" />
						<PsySvg v-else src="/static/detail/down.svg" />
					</view>
				</view>
				<view class="action">
					<PsyShowAndLike />
				</view>
			</view>
			<view class="p-20 border-bottom" v-show="isShow">{{lessonInfo.description}}</view>
			<view class="btn p-20">
				<uv-row gutter="10">
					<uv-col span="6">
						<uv-button @click="lastBtn">打赏一下</uv-button>
					</uv-col>
					<uv-col span="6">
						<uv-button type="error" @click="nextBtn">原价：{{ 20 }}元</uv-button>
					</uv-col>
				</uv-row>
			</view>
		</view>
		<view class="bg-white">
			<topTitle bannerWord="向医生咨询" rightText="" />
			<view class="h-150 flex justify-between align-center p-20 border-top border-bottom">
				<view class="flex h-100">
					<view class="image h-100 mr-20">
						<image class="avatar"
							src="http://vedio.ukulemon.com.cn/static/images/doctorDetails/portiat.png"></image>
					</view>
					<view class="info flex flex-column justify-around font-small">
						<view class="intro">
							<text class="name mr-20 font-sm">{{doctorInfo.doctorName}}</text>
							<text class="position">{{doctorInfo.specialization}}</text>
						</view>
						<view class="hospital text-secondary">医院名字</view>
					</view>
				</view>
				<view class="text-secondary">{{lessonInfo.title}}</view>
			</view>
			<view class="h-150 flex justify-between align-center p-20">
				<view class="flex align-center">
					<view class="mr-20">
						<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff"></uv-avatar>
					</view>
					<view>明安医生咨询</view>
				</view>
				<view class="flex align-center">
					09:00 - 21:00
					<PsySvg src="/static/detail/arrows-right.svg" width="50rpx" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		lessonInfoDetail
	} from "@/common/api/detail/detail.js"
	import topTitle from '@/components/common/title.vue'

	export default {
		components: {
			topTitle
		},
		data() {
			return {
				isShow: false,
				lessonInfo: {},
				doctorInfo: {}
			}
		},
		computed: {},
		methods: {
			iconClick() {
				console.log('111')
				this.isShow = !this.isShow
			},
			lessonInfoDetailFn(id) {
				lessonInfoDetail({
					id
				}).then((res) => {
					this.lessonInfo = res.lessonInfo
					this.doctorInfo = res.doctorInfo
				}).catch((err) => {

				})
			}
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			this.lessonInfoDetailFn(options?.id)

		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="less">
	.h-150 {
		height: 120rpx;
	}

	.image {
		.avatar {
			width: 70rpx;
			height: 100%;
		}
	}

	.h-100 {
		height: 100%;
	}

	.video {
		height: 500rpx;
	}
</style>